<template>
  <div class="main">
    <div class="flexbox">
      <div class="msgLeft">
        <el-scrollbar class="scroll" :native="false" :style="{height:mainHeight+'px'}">
          <div v-if="!isCollapse" class="menu_title">旁站监理后台管理系统</div>
          <el-menu
            :default-active="selectedMenu"
            :unique-opened="isOpen"
            class="el-menu-vertical-demo"
            background-color="#2c2f36"
            text-color="lightgray"
            @select="handleSelect"
            @open="handleOpen"
            :collapse="isCollapse"
            active-text-color="white"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="iconfont iconnavicon-rkyw" aria-hidden="true" style="color:inherit;"></i>
                <span slot="title">组织管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item class="menuItem" index="1-1">
                  <router-link to="userManagement">用户管理</router-link>
                </el-menu-item>
                <el-menu-item class="menuItem" index="1-2">
                  <router-link to="limitManagement">权限管理</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="2">
              <i class="iconfont iconnavicon-ckyw" aria-hidden="true"></i>
              <span slot="title">
                <router-link to="outlist">项目管理</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="iconfont iconnavicon-tysz" aria-hidden="true"></i>
              <span slot="title">
                <router-link to="supplierManagement">供应商管理</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="iconfont iconnavicon-tysz" aria-hidden="true"></i>
              <span slot="title">
                <router-link to="swiperManagement">轮播图管理</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="iconfont iconnavicon-kcgl" aria-hidden="true"></i>
              <span slot="title">
                <router-link to="helpManagement">帮助管理</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="iconfont iconnavicon-qghztj" aria-hidden="true"></i>
              <span slot="title">
                <router-link to="logManagement">日志管理</router-link>
              </span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="msgRight" :style="{height:mainHeight+'px'}">
        <headers @collapse="collapse"></headers>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  import headers from "./headers";

  export default {
    name: "HelloWorld",
    data() {
      return {
        mainHeight: "",
        selectedMenu: "",
        isOpen: true,
        isCollapse: false,
        roleId: ""
      };
    },
    components: {
      headers
    },
    methods: {
      toHome() {
        this.$router.push({name: "userManagement"});
      },
      //接收子组件传值
      collapse(obj) {
        this.isCollapse = obj.value;
      },
      handleOpen(key, keyPath) {
        // this.toModel(parseInt(key));
      },
      handleSelect(key, keyPath) {
        localStorage.setItem("selectedMenu", key);
      }
    },
    created() {
      this.roleId = localStorage.getItem("roleId");
      this.mainHeight = document.documentElement.clientHeight;
      // localStorage.setItem("user_id", 1);
    },
    mounted() {
      this.selectedMenu = localStorage.getItem("selectedMenu");
      // console.log(this.selectedMenu)
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .div_logo {
    text-align: center;
  }

  .img_logo {
    width: 140px;
    height: 140px;
  }

  .menu_title {
    text-align: center;
    color: rgb(177, 75, 55);
  }

  .scroll {
    background: #2c2f36;
  }

  .menuItem a {
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .el-menu-item.is-active a {
    color: #ffd04b;
    text-decoration: none;
  }

  .el-menu--horizontal {
    margin-left: 0px;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
  }

  .view {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 0 10px 0 20px;
    background: #f0f0f0;
    position: relative;
    box-sizing: border-box;
  }

  .msgRight {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: #f0f0f0;
    position: relative;
    box-sizing: border-box;
  }
</style>
